<template>
    <page-box>
        <template v-slot:header>
            <ask-breadcrumb>
                <template
                    v-for="(item, index) in $getBreadCrumbsName($route.path)"
                >
                    <ask-breadcrumb-item
                        :key="index"
                        v-if="item.path"
                        :to="'/' + item.path"
                        >{{ item.meta.title }}</ask-breadcrumb-item
                    >
                    <ask-breadcrumb-item :key="index" v-else>{{
                        item.meta.title
                    }}</ask-breadcrumb-item>
                </template>
            </ask-breadcrumb>
        </template>
        <div class="no-content">
            <div class="resource-view">
                <div class="group">
                    <div v-for="(item, index) in dataList" :key="index">
                        <span>{{ item.name }}</span>
                        <ul>
                            <li v-for="(subItem, i) in item.children" :key="i">
                                <div @click="handleSetboxShow(subItem)">
                                    <span v-if="subItem.remind" class="active"
                                        >已提醒</span
                                    >
                                    <p :class="{ gray: !subItem.count }">
                                        {{ subItem.count }}
                                        <span v-if="subItem.name === '土地'"
                                            >(块)</span
                                        >
                                    </p>
                                    <span>{{ subItem.name }}</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <set-tips
            :show="setboxshow"
            :typeName="typeName"
            :businessId="businessId"
            :businessName="businessName"
            :businessType="2"
            @handleCallBack="handleCallBack"
            @handleClose="setboxshow = false"
        ></set-tips>
    </page-box>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import SetTips from "@/components/set-tips/index.vue";
@Component({
    name: "ResourceTips",
    components: {
        SetTips
    }
})
export default class ResourceTips extends Vue {
    dataList: any[] = [];
    setboxshow = false;
    businessId = "";
    businessName = "";
    typeName = "";

    mounted() {
        this.getData();
    }

    async getData() {
        const res = await this.$server["timerRule/resourceTree"]({ data: {} });
        if (res.data.code === 200) {
            this.dataList = res.data.data;
        }
    }

    handleSetboxShow(item: any) {
        this.businessId = item.id;
        this.businessName = item.name;
        this.typeName = item.name + "资源";
        this.setboxshow = true;
    }

    handleCallBack() {
        this.setboxshow = false;
        this.getData();
    }
}
</script>

<style lang="scss" scoped>
::v-deep {
    .page-base-body {
        background: transparent !important;
        height: calc(100% - 50px) !important;
        overflow-y: hidden !important;
    }
}
* {
    margin: 0;
    box-sizing: border-box;
}

.no-content {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-top: 10px;
}

.resource-view {
    display: flex;
    background-color: #ffffff;
    overflow-y: auto;
    width: 100%;
    flex-direction: column;
    padding-bottom: 24px;
    & > p {
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #37383a;
        width: 200px;
        padding-left: 18px;
        padding-top: 18px;
    }
    .group {
        display: flex;
        width: 100%;
        flex-direction: column;
        & > div {
            display: flex;
            align-items: center;
            .active {
                position: absolute;
                font-size: 12px;
                font-family: "PingFang SC Medium";
                line-height: 14px;
                text-align: center;
                top: 0px;
                width: 100px;
                z-index: 20;
                color: #03b915;
                background: rgba(44, 130, 201, 0.1);
                left: -30px;
                transform: rotate(-28deg);
            }
            & > span {
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #37383a;
                width: 130px;
                padding-left: 44px;
                position: relative;
                &::before {
                    content: "";
                    display: block;
                    width: 12px;
                    height: 12px;
                    border-radius: 50%;
                    position: absolute;
                    left: 24px;
                    top: 50%;
                    transform: translateY(-50%);
                }
            }
            ul {
                display: flex;
                width: calc(100% - 130px);
                flex-wrap: wrap;
                li {
                    width: calc(100% / 8);
                    height: 80px;
                    padding: 0 12px;
                    div {
                        height: 100%;
                        padding: 0 4px;
                        background: #ffffff;
                        border: 1px solid #ecebf2;
                        opacity: 1;
                        border-radius: 7px;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        position: relative;
                        cursor: pointer;
                        overflow: hidden;
                        &:hover {
                            border: 1px solid #ffd1d1;
                            box-shadow: 0px 3px 7px rgba(253, 123, 123, 0.39);
                        }
                    }
                    p {
                        font-size: 28px;
                        font-family: PingFang SC;
                        font-weight: bold;
                        color: #37383a;
                        &.gray {
                            color: #ecebf2;
                        }
                    }
                    span {
                        font-size: 14px;
                        font-family: PingFang SC;
                        color: #666;
                        margin-top: 6px;
                        font-weight: bold;
                        user-select: none;
                    }
                    &:nth-child(n + 10) {
                        margin-top: 12px;
                    }
                }
            }
            & + div {
                margin-top: 24px;
            }
            &:nth-child(3n + 1) span::before {
                background: #de2728;
            }
            &:nth-child(3n + 2) span::before {
                background-color: #32a78f;
            }
            &:nth-child(3n + 3) span::before {
                background-color: #eab846;
            }
        }
    }
}
</style>
